<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="../css/mui.min.css">
		<script src="../js/mui.js"></script>
		<script src="../js/mui.tpl.js"></script>
		<script src="../js/app.js"></script>
		<style>
			html,
			body {
				background-color: #efeff4;
			}
		</style>
		<script>
			mui.init();
		</script>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">默认列表</h1>
		</header>
		<div id="scroll" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<div id="tableview"></div>
				<div id="tableview_tpl"></div>
				<div id="slider"></div>
				<div id="slider-table-pagination"></div>
				<div id="grid"></div>

				<script id="tpl" type="text/x-handlebars-template">
					<h5 class="mui-content-padded">自定义模板</h5>
					<div class="mui-card">
						{{>tableview}}
					</div>
				</script>
			</div>
		</div>
		<script>
			var tableview = [];
			for (var i = 0; i < 15; i++) {
				tableview.push({
					title: '选项' + i,
					//src: 'http://dcloudio.github.io/mui/assets/img/shuijiao.jpg',
					//desc: '图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述图片描述',
					//ellipsis: 2,
					//divider: false,
					navigate: true,
					striped: false, //二级列表
					chevron: false, //二级列表
					inverted: false, //二级列表
					//					badge:{
					//						text:'10',
					//						style:'primary'
					//					},
					//					btn:{
					//						text:'button',
					//						style:'primary'
					//					},
					//					switch: {
					//						style: 'primary',
					//						size:'mini',
					//						active: i % 3 == 1 ? false : true,
					//					},
					//					checkbox: {
					//						name: 'radio',
					//						value: i,
					//					},

					tableview: [{
						title: '子选项1'
					}, {
						title: '子选项2'
					}, {
						title: '子选项3'
					}]
				});
			}

			var slider = [];
			var img1 = {
				href: '',
				src: 'http://dcloudio.github.io/mui/assets/img/shuijiao.jpg',
				title: '图片1'
			};
			var img2 = {
				href: '',
				src: 'http://dcloudio.github.io/mui/assets/img/muwu.jpg',
				title: '图片2'
			};
			var img3 = {
				href: '',
				src: 'http://dcloudio.github.io/mui/assets/img/cbd.jpg',
				title: '图片3'
			};
			var img4 = {
				href: '',
				src: 'http://dcloudio.github.io/mui/assets/img/yuantiao.jpg',
				title: '图片4'
			};
			slider.push(img1);
			slider.push(img2);
			slider.push(img3);
			slider.push(img4);
			var slidertable = [];
			slidertable.push([img1, img2]);
			slidertable.push([img3, img4]);
			(function($) {
				$(function() {
					$('#tableview').tableview({
						tpl: '', //可自己指定自定义模板
						striped: true,
						chevron: false,
						inverted: false,
						tableview: tableview,
					});
					//					$('#tableview_tpl').tableview({
					//						tpl: document.getElementById("tpl").innerText, //指定了自定义模板
					//						tableview: ['item 1', 'item 2', 'item 3', 'item 4', 'item 5']
					//					})
					//					var sliderApi = $('#slider').slider({
					//						loop: true,
					//						slideshowDelay: 0,
					//						slider: slider,
					//					});
					//
					//					//					function testApi(index, callback) {
					//					//						setTimeout(function() {
					//					//							sliderApi.gotoItem(index);
					//					//							callback();
					//					//						}, 2000);
					//					//					}
					//					//					testApi(1, function() {
					//					//						testApi(2, function() {
					//					//							testApi(3, function() {
					//					//								testApi(0, function() {
					//					//									console.log('finish');
					//					//								});
					//					//							});
					//					//						});
					//					//					});
					//					$('#slider-table-pagination').slider({
					//						loop: true,
					//						slideshowDelay: 0,
					//						slider: slidertable,
					//					});
					//					//					//快捷用法(直接传数据数组)
					//					$('#grid').grid(slider);
					//标准用法(传入一个包含数据数组的对象，以防需要其他额外的参数)					
					//					$('#grid').grid({
					//						grid: slider,
					//					});
					//					setTimeout(function() {
					$('#scroll').pullRefresh({
						down: {
							callback: pulldownRefresh
						},
						up: {
							callback: pullupRefresh
						}
					}).pullupLoading();
					
					//					//					}, 2000);
					//
					function pulldownRefresh() {
						console.log('pulldown');
						var self = this;
						setTimeout(function() {
							self.endPulldownToRefresh(); //refresh completed
							var table = document.body.querySelector('.mui-table-view');
							var cells = document.body.querySelectorAll('.mui-table-view-cell');
							for (var i = cells.length, len = i + 3; i < len; i++) {
								var li = document.createElement('li');
								li.className = 'mui-table-view-cell';
								li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
								table.insertBefore(li, table.firstElementChild);
							}
						}, 2000);
					}

					function pullupRefresh() {
						console.log('pullup');
						var self = this;
						setTimeout(function() {
							self.endPullupToRefresh(true); //refresh completed
							setTimeout(function() {
								//刷新当前上拉加载区域(参数为true时重新启用上拉加载;html5版会重新计算该区域大小,滚动条位置等信息)
								//一般当区域内容发生变化时可手动调用此方法,举例：分类选项+上拉加载,不同分类选项显示不同条目+上拉加载功能
								//点击分类选项后,手动调用此方法，会根据需要重新开启上拉加载功能
								$('#scroll').pullRefresh().refresh(true);
							}, 5000); //5秒后重新启用上拉加载
							var table = document.body.querySelector('.mui-table-view');
							var cells = document.body.querySelectorAll('.mui-table-view-cell');
							for (var i = cells.length, len = i + 3; i < len; i++) {
								var li = document.createElement('li');
								li.className = 'mui-table-view-cell';
								li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';
								table.appendChild(li);
							}
						}, 2000);
					}
				});
				document.querySelector(".mui-bar").addEventListener('dragleft',function(e){
					var detail = e.detail;
					console.log(Math.abs(detail.deltaX));
					if(Math.abs(detail.deltaX)>30){//deltaX=move.x-start.x;
						//TODO
					}
				});
			})(mui);
		</script>
	</body>

</html>